<template>
  <!-- 榜上力量 -->
  <div class="strength">
    <div class="bgImg">
      <section>
        <div class="topImg clearfix">
          <img src="../../../assets/img/strength/liliang.png" alt="">
          <div class="clearfix logo">
            <h4>榜上力量</h4>
            <span>中国鞋网品牌排行 TOP 50</span>
          </div>
          <!-- <el-button @click="changeChosen = true">如何入选？</el-button> -->
          <el-button @click="hotline">如何入选？</el-button>
        </div>
        <div class="tabs">
          <el-tabs type="border-card">
            <el-tab-pane label="最受用户喜爱品牌" />
            <el-tab-pane label="最受用户喜爱品牌" />
            <el-tab-pane label="最受用户喜爱品牌" />
          </el-tabs>
          <p>
            在榜单出来后，会利用新媒体平台，模糊具体的发布机构，让公众认为这是教育部发布，这当然令有的名校心动，因为虽然在各地名气很响，但这些高校也多陷入应试教育争议，学校也急需教育部官方对办学的“认可”。主动把民间机构的排行榜，说成是教育部组织进行的全国性排行。
          </p>
        </div>
        <div class="list clearfix">
          <div class="top2">
            <img src="../../../assets/img/strength/er.png" alt="">
            <div class="top2Txt">
              <h2>路易威登</h2>
              <p>每个故事都蕴含着一段标致的旅程</p>
              <el-button type="info" plain>信息按钮</el-button>
            </div>
            <div class="two">
              <img src="../../../assets/img/strength/dis.png" alt="">
            </div>
          </div>
          <div class="top1">
            <img src="../../../assets/img/strength/yi.png" alt="">
            <div class="top1Txt">
              <h2>路易威登</h2>
              <p>每个故事都蕴含着一段标致的旅程</p>
              <el-button type="primary">查看详情</el-button>
            </div>
            <div class="one">
              <img src="../../../assets/img/strength/蒙版组 588.png" alt="">
            </div>
          </div>
          <div class="top3">
            <img src="../../../assets/img/strength/san.png" alt="">
            <div class="top3Txt">
              <h2>路易威登</h2>
              <p>每个故事都蕴含着一段标致的旅程</p>
              <el-button>查看详情</el-button>
            </div>
            <div class="tree">
              <img src="../../../assets/img/strength/tu4.png" alt="">
            </div>
          </div>
        </div>
        <div v-for="i in top" :key="i" class="listTxt clearfix">
          <div class="top4"> NO.{{ i+3 }}</div>
          <div class="listImg">
            <img src="../../../assets/img/strength/tu1.png" alt="">
          </div>
          <div class="listName">
            <h3>锐步</h3>
            <span><img src="../../../assets/img/strength/已认证.png" alt=""></span>
            <p>每个故事都蕴含着一段标致的旅程</p>
          </div>
          <div class="look">
            <el-button plain>查看详情</el-button>
          </div>
        </div>
        <el-button
          type="primary"
          plain
          style="background-color: rgba(246,246,246,1); color:#417AEF; line-height:32px; letter-spacing:10px; "
          @click="more"
        >查看更多</el-button>
        <div class="banner">
          <img src="../../../assets/img/strength/zgjm.png" alt="">
        </div>
      </section>
    </div>
    <!-- 如何入选弹框 -->
    <my-hotline ref="myHotline" />
  </div>
</template>

<script>
import myHotline from '../../../components/template-item1/hotline'
export default {
  name: 'Strength',
  components: {
    myHotline
  },
  data() {
    return {
      top: 7
    }
  },
  methods: {
    more() {
      this.top = 47
    },
    hotline() {
      this.$refs.myHotline.showHotline()
    }
  }
}
</script>

<style lang="scss" scoped>
.strength{
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  background-color:rgba(246,246,246,1);
  height: 100%;
  >.bgImg{
    width: 100%;
    background: url('../../../assets/img/strength/bg.png') no-repeat;
    >section{
      width: 1200px;
      margin: 0 auto;
      >.banner{
        width:1200px;
        height:72px;
        margin-bottom: 70px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      >.el-button{
        width:278px;
        height:54px;
        border:1px solid rgba(65,122,239,1);
        margin: 70px 460px 30px;
      }
      >.topImg{
        padding: 20px 0;
        .logo{
          float: left;
          margin-left: -162px;
          margin-top: 26px;
          h4{
            width:136px;
            height:46px;
            font-size:34px;
            font-weight:600;
            line-height:46px;
            color:rgba(255,255,255,1);
            float: left;
            margin-right: 10px;
          }
          span{
            font-size:16px;
            font-weight:600;
            line-height:21px;
            color:rgba(255,255,255,1);
            line-height: 50px;
          }
        }
        >img{
          float: left;
        }
        >.el-button{
          float: right;
          margin-top: 40px;
          width:158px;
          height:46px;
          border:1px solid rgba(255,255,255,1);
          border-radius:4px;
          background-color: transparent;
          text-align: center;
        }
      }
      >.tabs{
        width: 1200px;
        height: 50px;
        text-align: center;

        >p{
          width:1110px;
          height:64px;
          font-size:16px;
          line-height:30px;
          color:rgba(255,255,255,1);
          margin: 20px auto;
        }
      }
      >.list{
        margin-top: 410px;
        h2{
          width: 100%;
          font-size:30px;
          font-weight:400;
          line-height:40px;
          color:rgba(41,41,41,1);
          letter-spacing:20px;
          text-align: center;
          margin-top: 16px;
          margin-bottom: 14px;
        }
        p{
          width:100%;
          font-size:20px;
          font-weight:400;
          line-height:40px;
          color:rgba(51,51,51,1);
          text-align: center;
        }
        >.top1{
          width:420px;
          height:382px;
          background:linear-gradient(180deg,rgba(255,241,199,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
          float: left;
          text-align: center;
          position: static;
          .one{
            width: 225px;
            height: 116px;
            position: relative;
            top: -345px;
            left: 92px;
          }
          .top1Txt{
            margin-top: -255px;
          }
          .el-button{
            width:120px;
            height:42px;
            background:rgba(65,122,239,1);
            border-radius:4px;
            line-height: 20px;
          }
          >img{
            width: 100%;
            position: relative;
            top: -255px;
          }
          .el-button{
            margin-top: 34px;
          }
          h2{
            color: rgba(214, 0, 15, 1);
          }
        }
        >.top2{
          width:390px;
          height:333px;
          background:linear-gradient(180deg,rgba(234,234,234,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
          float: left;
          margin-top: 50px;
          text-align: center;
          position: static;
          .two{
            width: 225px;
            height: 116px;
            position: relative;
            top: -330px;
            left: 100px;
          }
          .top2Txt{
            margin-top: -214px;
          }
          .el-button{
            margin-top: 34px;
            width:120px;
            height:42px;
            border:1px solid rgba(153,153,153,1);
            border-radius:4px;
            line-height: 20px;
            background-color: #fff;
          }
          >img{
            width: 100%;
            position: relative;
            top: -214px;
          }
        }
        >.top3{
          width:390px;
          height:333px;
          background:linear-gradient(180deg,rgba(255,228,193,1) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
          float: left;
          text-align: center;
          margin-top: 50px;
          position: static;
          .tree{
            width: 225px;
            height: 116px;
            position: relative;
            top: -338px;
            left: 68px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .top3Txt{
            margin-top: -210px;
          }
          .el-button{
            margin-top: 34px;
            width:120px;
            height:42px;
            border:1px solid rgba(153,153,153,1);
            opacity:1;
            border-radius:4px;
            line-height: 20px;
            color: #417AEF;
          }
          >h2{
            color: rgba(124, 72, 6, 1);
          }
          >img{
            width: 100%;
            position: relative;
            top: -218px;
          }
        }

      }
      >.listTxt{
          background-color: #fff;
          border-top: 1px solid #cccccc;
          width: 100%;
          height: 260px;
          padding: 50px 70px;
          box-sizing: border-box;
            .top4{
              width:84px;
              height:46px;
              font-size:34px;
              font-weight:bold;
              line-height:46px;
              color:rgba(228,168,35,1);
              float: left;
              margin: 60px 70px 0 0;
            }
            .listImg{
              width:288px;
              height:162px;
              background:rgba(255,255,255,1);
              box-shadow:0px 2px 2px rgba(0,0,0,0.16);
              border-radius:4px;
              float: left;
              text-align: center;
              >img{
                width:210px;
                height:118px;
                margin-top: 22px;
              }
            }
            .listName{
              float: left;
              margin-left: 60px;
              span{
                position: relative;
                left: 110px;
                top: -30px;
              }
              h3{
                width:89px;
                height:58px;
                font-size:44px;
                font-weight:400;
                line-height:58px;
                color:rgba(51,51,51,1);
              }
              p{
                width:306px;
                height:27px;
                font-size:20px;
                line-height:27px;
                color:rgba(102,102,102,1);
                margin-top: 41px;
              }
            }
            .look{
              float: right;
              margin-top: 105px;
              .el-button{
                width:130px;
                height:40px;
                border:1px solid rgba(153,153,153,1);
                opacity:1;
                border-radius:4px;
                line-height: 18px;
              }

            }
        }
      >.listTxt:hover{
        background-color: rgba(245,248,255,1);
      }
    }
  }
  .el-button:hover{
    background-color: rgba(65,122,239,1) !important;
    color: #fff !important;
  }

}
</style>
